<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
	<meta content="telephone=no" name="format-detection">
	<%-- <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/lib/jQuery-tck/css/common.css"/> --%>
	
	<title>Insert title here</title>

	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/jquery.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/common.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/syauthority/js/syuser.js"></script>
<%-- 	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/wineproduct/js/wineproduct_bootstrapValidator.js"></script> --%> 
 	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/bootstrap.min.css"/> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/jquery.dataTables.min.css"/> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/bootstrapValidator.min.css"/> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/zTreeStyle.css"/>

</head>
<body>
	
<!-- 	商品名检索<input type="text" id="searchByName" class="search_diy"/></br>
	类型检索<input type="text" id="searchByType" class="search_diy"/> -->
	</br>
	<button   class="btn btn-danger btn-sm" id="deleteAll">批量删除</button> 
	<button   class="btn btn-primary btn-sm addBtn" id="addSuser_button_id" >新 增</button>
		
	<div>
		<table id="example_syuser" class="table table-bordered table-header">
			<thead>
				<tr>
					<th>全选</br><input type="checkbox" name="allChecked" /></th>
					<th>id</th>
					<th>昵称</th>
					<th>createtime</th>
					<th>姓名</th>
					<th>电话</th>
				<!-- 	<th>生产厂商</th> -->
					<th>出生日期</th>
					<th>state状态</th>
					<th>地址</th>
					
					<th>邮箱</th>
					
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>		
		</table>
	</div>
	<!-- 引入新增bootstrap弹框jsp -->
	 <jsp:include page="syuser_add.jsp"></jsp:include>	
	<jsp:include page="syuser_update.jsp"></jsp:include> 
	<div class="modal fade" id="myModal-grantRole-info" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close"
                                    data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" >
             授予角色                 
                            </h4>
                        </div>
                       <form class="required-validate" role="form" action="" method="post"  id="updateSyuser_from_id">
                         <div class="modal-body">
                             <div class="form-group">
                                 <label class="col-sm-3 control-label no-padding-right" >角色： </label>
									<input id="grantUserId" type="hidden"/>
                                 <div class="col-sm-9" id="getCheckBox">
                                    <!--  <input type="checkbox"    style="width: 250px" maxlength="15" placeholder="10个汉字以内" /> -->
									<ul id="user_role_tree" class="ztree"></ul>
                                 </div>
                             </div>                                                
                         </div>                         
                           <div class="modal-footer">
                                <button type="button" class="btn btn-default"
                                        data-dismiss="modal">关闭
                                </button><!--onclick="addRole_button_ajax()"  -->
                                <button type="button" id="addSyuserRole_button_id"  onclick="grant_button()" class="btn btn-primary" >提交</button>
                                
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div>
        </div>	
<script type="text/javascript">
$(function() {
	/* var height=document.documentElement.clientHeight-50;
	document.getElementById('iframe-page-content').style.height=height+'px'; */
});
var set;
var zTree;
var zNodes;
$(document).ready(function(){
	

	 set = {
		    view: {  
		        dblClickExpand: true,//双击节点时，是否自动展开父节点的标识  
		        showLine: false,//是否显示节点之间的连线  
		        fontCss:{'color':'orange','font-weight':'bold'},//字体样式函数  
		        selectedMulti: true //设置是否允许同时选中多个节点  
		    },  
			check:{  
		        chkStyle: "checkbox",
		        enable: true  
		    },  
			   data: {  
			        simpleData: {//简单数据模式  
			            enable:true,  
			            idKey: "id",  
			            pIdKey: "pid",  
			            rootPId: ""  
			        }  
			    },
			    callback: {  
			        onClick: function(e,treeId, treeNode) {
			        	console.info("treeid:"+treeId)
			        	console.info("treenode:"+treeNode)
			    /*     var url=sy.bp()+treeNode.src;
			        $("#iframe-page-content").attr('src',url); */
			        },
			        onDblClick:function (){
			        
			        }
			    } 
	};

	
	
});
/**
 * 从后台获得角色tree放到授角色的boostrap框中
 */
function syuser_grant(id){
	console.info(id)
	//给隐藏框一个id以便于授权时取
	$("#grantUserId").val(id);
	var url_grant=sy.bp()+"/syuser/grant";
	$.ajax({
		url:url_grant,
		type:"post",			
		data:{
			"id":id
		},
		dataType:"json",
		success:function(data){
			
			$("#myModal-grantRole-info").modal('show');
			t = $.fn.zTree.init($("#user_role_tree"), set, data);
		
		},
		error:function(){
			console.info('ajax请求失败')
		}
	})
		
}	

	/**
	 * 后台给用户添加删除角色
	 */
	function grant_button(){
		var syuserId=$("#grantUserId").val();
		 console.info("syuserId:"+syuserId)
		var array=[];
		var treeObj = $.fn.zTree.getZTreeObj("user_role_tree");
	    //获取全部节点数据  
        var nodes = treeObj.getNodes();
	    for(var i=0;i<nodes.length;i++){
	    	if(nodes[i].checked){
	    		array.push(nodes[i].id);
	    	}
	    }
	   
	    console.info("array:"+array)
	    //console.info("nodes[6].checked"+nodes[5].checked)
		console.info(111)
		var url_grant=sy.bp()+"/syuser/grantRole";
		$.ajax({
			url:url_grant,
			type:"post",			
			traditional:true,//可以传数组
			data:{
				"id":syuserId,
				"roleIds":array
			},
			dataType:"json",
			success:function(data){
				alert('操作成功')
				/* $("#myModal-grantRole-info").modal('show');
				t = $.fn.zTree.init($("#user_role_tree"), set, data); */
			
			},
			error:function(){
				console.info('ajax请求失败')
			}
		})
	}

</script>   
</body>
</html>